<template>
  <div id="home" class="wrapper">
    <nav-bar class="home-nav">
      <div slot="center">购物街</div>
    </nav-bar>
 <tab-control
        class="tab-control"
        :title="['流行', '新款', '精选']"
        @GoodsClick="changCurent"
        v-show="isShowTabControl"
        ref="TabControl1"
      ></tab-control>
    <!--    @pullingUpEvent="pullingUpEvent" -->
    <scroll
      class="content1"
      ref="scroll"
      :probeType="3"
      @srcollevent="scrollshow"
      @pullingUpEvent="pullingUpEvent"
      :pullUpLoad="true"
    >
      <home-swiper :banners="banners" @SwiperLoadImg="LoadImg"></home-swiper>
      <recommend-view :recommends="recommends"></recommend-view>
      <feature></feature>
      <tab-control
        :title="['流行', '新款', '精选']"
        @GoodsClick="changCurent" ref="TabControl2"
      ></tab-control>
      <goods-list :goods="getGoodsListType" />
    </scroll>
    <backtop @click.native="btnclick" v-show="isShowbackTop"></backtop>
  </div>
</template>

<script>
// import NavBar   from 'components/common/navbar/NavBar'
import homeSwiper from "./childcomps/homeSwiper.vue";
import RecommendView from "./childcomps/RecommendView.vue";
import Feature from "./childcomps/Feature.vue";
import GoodsList from "../../components/content/goods/GoodsList.vue";

import NavBar from "../../components/common/navbar/NavBar.vue";
import TabControl from "../../components/content/tabControl/TabControl.vue";
import { getHomeMultidata, getHomeGoods } from "network/home";
import Scroll from "../../components/common/scroll/Scroll.vue";
import backtop from "../../components/content/backTop/backtop.vue";
export default {
  name: "Home",
  components: {
    homeSwiper,
    RecommendView,
    Feature,
    GoodsList,
    backtop,

    TabControl,
    NavBar,
    Scroll,
  },
  data() {
    return {
      recommends: [],
      banners: [],
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] },
      },
      curentType: "pop",
      isShowbackTop: false,
      test: this.$refs.scroll,
      TabPosition:0,
      isShowTabControl:false,
      saveY:0
    };
  },
  computed: {
    getGoodsListType() {
      return this.goods[this.curentType].list;
    },
  },
  created() {
    //1.请求多个数据
    this.getHomeMultidata();
    //请求商品
    this.getHomeGoods("new");
    this.getHomeGoods("pop");
    this.getHomeGoods("sell");
  },
  mounted() {
    const testa=this.debounce( this.$refs.scroll.refresh)
    this.$bus.$on("itemImageLoad1", () => {
     testa();
    });
  },
  activated(){
this.$refs.scroll.scrollTo(0,this.saveY,3);
this.$refs.scroll.refresh();
console.log(this.saveY);
  },
  deactivated(){
this.saveY=this.$refs.scroll.getScrollY();
console.log(this.saveY);
  },
  methods: {
    debounce(func, wait) {
    let timer=null;
    return function(args) {
      if (timer) clearTimeout(timer);
      timer = setTimeout(() => {
        func.apply(this, args)
      }, wait)
     
    }
},
    // 点击事件方法
    changCurent(index) {
      switch (index) {
        case 0:
          this.curentType = "pop";
          break;
        case 1:
          this.curentType = "new";
          break;
        case 2:
          this.curentType = "sell";
      }
    this.$refs.TabControl2.isColor=index;
    this.$refs.TabControl1.isColor=index;
    },
    //点击箭头 回到顶部
    btnclick() {
      this.$refs.scroll.scrollTo(0, 0, 500);
    },
    //下拉位置大于1000时 箭头隐藏
    scrollshow(position) {
      this.isShowbackTop = -position.y > 1000;
this.isShowTabControl=-position.y>this.TabPosition;

    },
    //下拉加载更多
    pullingUpEvent() {
      this.getHomeGoods(this.curentType);
      this.$refs.scroll.scroll.refresh();
    },
    //轮播图加载完事件
   LoadImg(){
    
this.TabPosition=this.$refs.TabControl2.$el.offsetTop;
   },
    /**
     * 网络请求方法
     */
    getHomeMultidata() {
      getHomeMultidata().then((res) => {
        this.recommends = res.data.recommend.list;
        this.banners = res.data.banner.list;
      });
    },
    getHomeGoods(type) {
      const page = this.goods[type].page + 1;
      // this.goods[type].page += 1;
      getHomeGoods(type, page).then((res) => {
        this.goods[type].list.push(...res.data.list);
        this.goods[type].page += 1;
        this.$refs.scroll.scroll.finishPullUp();
      });
    },
  },
};
</script>

<style scoped>
#home {
  padding-top: 44px;
  height: 100vh;
  position: relative;
}
.home-nav {
  background-color: var(--color-tint);
  color: white;
  position: fixed;
  left: 0px;
  right: 0px;

  top: 0px;
  z-index: 9;
}
.tab-control {
  position: relative;
  z-index: 9;
}
.content1 {
  position: absolute;
  overflow: hidden;
  top: 44px;
  bottom: 49px;
  left: 0px;
  right: 0px;
}
</style>
